<template>
    <div id="box">
     
    <mt-search autofocus placeholder="搜素商品"></mt-search> 
 
  <ul class="category-nav clearfix">
                <li class="focus" data-channel="boys">
                    <span>Boys</span>
                </li>
                <li class="" data-channel="girls">
                    <span>Girls</span>
                </li>
                <li class="" data-channel="kids">
                    <span>Kids</span>
                </li>
                <li class="" data-channel="lifestyle">
                    <span>Lifestyle</span>
                </li>
        </ul>
     <div class="content" style="height:100%;">
       <ul class="left">
       <li
      v-for="(list, index) in list1"
      :key="list.id"
      @click="onclick(index)"
      :class="{active:index == dynamic}"
       >
       {{list.text}}        
       </li>
       </ul> 
      <div class="sub" v-show="sub === 0">
        <router-link to="/Cartlist"><ul >
           <li
           v-for="item in listright"
           :key="item.id"
           >{{item.name}}</li>      
         </ul></router-link>  
         </div> 
          <div class="sub" v-show="sub === 1">
         <router-link to="/Cartlist"><ul >
           <li
           v-for="item in listright1"
           :key="item.id"
           >{{item.name}}</li>        
         </ul></router-link> 
         </div> 
          <div class="sub" v-show="sub === 2">
        <router-link to="/Cartlist"><ul >
            <li
           v-for="item in listright2"
           :key="item.id"
           >{{item.name}}</li>        
         </ul></router-link> 
         </div> 
          <div class="sub" v-show="sub === 3">
        <router-link to="/Cartlist"><ul >
            <li
           v-for="item in listright3"
           :key="item.id"
           >{{item.name}}</li>         
         </ul></router-link>
         </div> 
          <div class="sub" v-show="sub === 4">
        <router-link to="/Cartlist"><ul >
            <li
           v-for="item in listright4"
           :key="item.id"
           >{{item.name}}</li>       
         </ul></router-link>  
         </div> 
       
        
       
       </div>
    </div>
</template>
    
<script>

import list from "../../static/json/index.json"
export default {
  name: 'Mall',
  data() {
    return{
       list1:list.lists,
       isActive:list.isActive,
       dynamic:list.dynamic,
       sub:list.sub,
       listright:list.listright,
       listright1:list.listright1,
       listright2:list.listright2,
       listright3:list.listright3,
       listright4:list.listright4,
   }
    //当点击时候点亮，同级的li标签删除Class.dynamic的值是可以改变的，默认第一个被选中就写0
  },
  created () {
    //  console.log(this.list1)
    
  },
  methods:{
   onclick:function(index){
     if(index==1){
       this.dynamic = index;
     }
     this.dynamic=index;
     this.sub=index;
   }
   
  }
}

</script>

<style lang='scss'>
a{
  text-decoration: none;
  color:#353535; 
}
#box{
  height: 100%;
  overflow: hidden;
}
  .mint-searchbar{
   position: absolute;
   top: 0;
   width: 100%;
  }
  .mint-searchbar-inner{
   border-radius:50px;
  }
  .mint-search{
    height: 15px;
  }
  .category-nav{
    display: flex;
     
    justify-content: space-around;
    border-bottom: 1px solid #e6e6e6;
    height: 1.75rem;
    background: #ffffff;
    li{border-right: 1px solid #e6e6e6;
          box-sizing: border-box;
    color: #999;
    display: block;
    float: left;
    height: 100%;
    padding: .5rem 0;
    text-align: center;
    width: 25%;
    }
  }
  .category-page .category-nav span{
    
    display: block;
    font-size: 15PX;
    height: .75rem;
    line-height: .75rem;
    width: 100%;
  }
  .content{
        background: #f8f8f8;
    overflow-x: hidden;
      display: flex;
   
     .left{
       box-sizing: border-box;
     overflow-x: hidden;
    width: 45%;
    li{   
          height: 4.225rem;
    line-height: 4.225rem;
    overflow: hidden;
    padding: 0 .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
     }
  }
  }
 
 .sub{
      background: #fff;
    box-sizing: border-box;
    
    height: 100%;
    overflow-x: auto;
    width: 55%;
     li{
      height: 4.225rem;
    line-height: 4.225rem;
     overflow: hidden;
     padding: 0 .8rem;
     text-overflow: ellipsis;
     white-space: nowrap;
        border-bottom: 1px solid #e6e6e6;
     }
  }
 .active{
  background: #ffffff;  
 }
</style>
